import React, { useState } from 'react';
import { Box, Pill, SecondaryButton, Text, ThemeColorType } from '@nova-hf/ui';
import { IconType } from '@nova-hf/ui/umd/ts/src/icon-library/iconMap';
import { formatDate } from 'beta/utils/helpers';
import { useTranslation } from 'beta/utils/i18n';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import { DiscountStatus, useContractDiscountsQuery } from 'typings/graphql';

import { SectionHeader } from '../../../thjonustur/[serviceId]/comoponents/SectionHeader';

type StatusInfo = {
  color: ThemeColorType;
  icon: IconType;
  text: string;
};

const ContractDiscountsContainer = () => {
  const { t } = useTranslation('containers');
  const router = useRouter();
  const contractId = typeof router?.query?.contractId === 'string' ? router?.query?.contractId : '';
  const [showDiscounts, setShowDiscounts] = useState(true);

  const { data, loading, error } = useContractDiscountsQuery({
    variables: {
      input: {
        id: contractId,
      },
    },
    skip: !contractId,
  });
  const discounts = data?.contractDiscounts;

  const getStatusInfo = (status: string): StatusInfo | undefined => {
    if (status === 'Active') {
      return { color: 'success', icon: 'checkMark', text: t('contractItemsContainer.active') };
    }
    if (status === 'Cancelled') {
      return { color: 'warning', icon: 'close', text: t('contractItemsContainer.inactive') };
    }
    if (status === 'Pending') {
      return { color: 'yellow', icon: 'return', text: t('contractItemsContainer.pending') };
    }
    return undefined;
  };

  if (!data || error || loading || !discounts?.length) {
    return null;
  }

  return (
    <Box>
      <Box display="flex" flexDirection="column" gap={2}>
        <Box>
          <SectionHeader
            headerTitle={t('contractDiscountsContainer.discounts')}
            rightActionNode={
              <SecondaryButton
                colorScheme={'purple'}
                icon={showDiscounts ? 'minus' : 'add'}
                text={
                  showDiscounts
                    ? t('contractItemsContainer.hide')
                    : t('contractItemsContainer.show')
                }
                onClick={() => setShowDiscounts(!showDiscounts)}
              />
            }
          />
        </Box>
        {showDiscounts && (
          <Box>
            <Box borderBottomStyle="solid" color="black100" borderWidth="2px" paddingBottom={2}>
              <Box display="grid" gridTemplateColumns={4} gap={2} alignItems="center">
                <Text variant="eyebrowSmall">{t('contractDiscountsContainer.headers.start')}</Text>
                <Text variant="eyebrowSmall">{t('contractDiscountsContainer.headers.end')}</Text>
                <Text variant="eyebrowSmall">{t('contractDiscountsContainer.headers.type')}</Text>
                <Text variant="eyebrowSmall">{t('contractDiscountsContainer.headers.status')}</Text>
              </Box>
            </Box>
            {discounts?.map((item) => (
              <React.Fragment key={item?.id}>
                <Box display="grid" gridTemplateColumns={4} gap={2} alignItems="center" marginY={2}>
                  <Text variant="pSmallRegular">
                    {item?.start
                      ? formatDate(item?.start, 'dd.MM.yyyy')
                      : t('contractDiscountsContainer.noDate')}
                  </Text>
                  <Text variant="pSmallRegular">
                    {item?.end
                      ? formatDate(item?.end, 'dd.MM.yyyy')
                      : t('contractDiscountsContainer.noDate')}
                  </Text>
                  <Text variant="pSmallRegular">{item?.offerReasonId}</Text>
                  <Pill
                    text={getStatusInfo(item?.status ?? '')?.text ?? ''}
                    color={getStatusInfo(item?.status ?? '')?.color}
                    maxWidth="fitContent"
                    icon={{
                      icon: getStatusInfo(item?.status ?? '')?.icon,
                      color: item?.status === DiscountStatus.Pending ? 'black100' : 'white',
                      size: 16,
                    }}
                  />
                </Box>
                <Box
                  borderColor="grey200"
                  borderBottomStyle="solid"
                  borderWidth="1px"
                  marginBottom={2}
                ></Box>
              </React.Fragment>
            ))}
          </Box>
        )}
      </Box>
    </Box>
  );
};

export default inject('ui', 'authentication')(observer(ContractDiscountsContainer));